<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Move Animations</title>
    <style>
      .container {
        position: relative;
        padding: 0;
      }
      .item {
        width: 100%;
        height: 30px;
        background-color: #f3f3f3;
        border: 1px solid #666;
        box-sizing: border-box;
        position: relative;
      }
      .fade-enter-active, .fade-leave-active, .fade-move {
        transition: all 1s cubic-bezier(.55,0,.1,1);
      }
      .fade-enter, .fade-leave {
        opacity: 0;
        transform: scaleY(0.01) translate(30px, 0);
      }
      <!-- .fade-enter-active { -->
        <!-- opacity: 1; -->
        <!-- transform: scaleY(1) translate(0, 0); -->
      <!-- } -->
      <!-- .fade-leave-active { -->
        <!-- position: absolute; -->
      <!-- } -->
    </style>
    <script src="https://cdn.jsdelivr.net/lodash/4.3.0/lodash.min.js"></script>
    <!-- Delete ".min" for console warnings in development -->
    <script src="../../dist/intact.js"></script>
  </head>
  <body>
      <script type="text/vdt" id="template">
        <div id="el">
          <button ev-click={self.insert.bind(self)}>insert at random index</button>
          <button ev-click={self.reset.bind(self)}>reset</button>
          <button ev-click={self.shuffle.bind(self)}>shuffle</button>
          <Animate a:tag="ul" class="container">
            <Animate a:transition="fade" v-for={self.get('items')} class="item" key={value}>
                {value} <button ev-click={self.remove.bind(self, key)}>x</button>
            </Animate>
          </Animate>
        </div>
    </script>

    <script>
        var id = 6;

        var App = Intact.extend({
            defaults: {
                items: [1, 2, 3, 4, 5]
            },
            template: document.getElementById('template').innerHTML,
            insert() {
                var items = this.get('items');
                var i = Math.round(Math.random() * items.length);
                items.splice(i, 0, id++);
                i = Math.round(Math.random() * items.length);
                items.splice(i, 0, id++);
                this.update();
            },
            reset() {
                this.set('items',  [1, 2, 3, 4, 5]);
            },
            shuffle () {
                this.set('items', _.shuffle(this.get('items')));
            },
            remove(index) {
                var items = this.get('items');
                items.splice(index, 2);
                this.update();
            }
        });
        var app = Intact.mount(App, document.body);
    </script>
  </body>
</html>
